<template>
  <div id="safeEvents">
    <div class="safeEvents-title">
      监测日志
    </div>
    <div class="safeEvents-content">
      <div class="btn-option">
        <span class="title">筛选条件</span>
      </div>
      <!-- 筛选条件 -->
      <div id="filter-label" v-if="" v-loading="loadingCtrl.isFilterGroupLoading" element-loading-text="拼命加载中">
        <div id="group-list">
          <div class="item" v-for="(data,index) in filterCategory" :key="index">
            <!-- 条件名称-->
            <div class="title">{{data.cn_name}}</div>
            <!-- 条件列表-->
            <div class="info">
              <div class="list">
                <div ref="checkboxWrap" class="checkBtnGroup" :class="{groupLineBorder:index != 0}">
                  <at-checkbox-group :class="{showMore:stateCtrl.moreCtrl == index}" v-model="choose[index]" @change="changeCheckboxFilter">
                    <at-checkbox-button v-for="(value, num) in filterData[data.esKey]" :label="value" :key="num">
                      <!-- 将日志类型英文转成对应的中文 -->
                      <span v-if="data.esKey === 'stype'">
                        {{translateChinese('stype', value, stypeDict)}}
                      </span>
                      <span v-else-if="data.esKey === 'level'">
                        {{translateChinese('levelStr', value)}}
                      </span>
                      <span v-else>{{value}}</span>
                    </at-checkbox-button>
                  </at-checkbox-group>
                </div>
                <div class="more" :class="{groupLineBorder:index != 0}">
                  <span v-if="data.moreVisibleCtrl" @click="moreGroup(index)" :class="{showBtnMore:stateCtrl.btnMoreCtrl == index}" class="btn-more">更多
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- "更多"对话框 -->
      <div id="filterDialog">
        <at-dialog :title="translateChinese('dialogTitle', dialogType)" :visible.sync="stateCtrl.filterDialogVisible" @close="filterDialogClose" size="larger">
          <div class="dialog-body">
            <transfer ref="transfer" :dialogType="dialogType" @dialogCloseEvent="closeFilterDialog" @chooseChange="chooseChangeEvent"></transfer>
          </div>
        </at-dialog>
      </div>
      <!-- 搜索框 -->
      <div id="tool-bar">
        <at-date-picker id="datepick" v-model="dayRange" type="datetimerange" :picker-options="pickerOptions" @change="onDateRangeChange" placeholder="选择时间范围" :clearable="false" :editable="false">
        </at-date-picker>
        <div class="box-search-wrap" @keyup.enter="onSearch">
          <at-autocomplete class="box-search" placeholder="受害主机、MD5、协议、恶意代码名称..." v-model="searchInput" :fetch-suggestions="searchHistory">
          </at-autocomplete>
          <i class="icon-clear" :class="{'clear-visible':!stateCtrl.btnClearVisible}" @click="clearInput"></i>
        </div>
        <div class="search-btn-wrap" @click="onSearch">
          <i class="saas-icon-glass"></i>
        </div>
        <div class="searchNum">
          共<span class="num">{{pagination.total}}</span>条
        </div>
      </div>
      <div class="btn-option">
        <span class="title">标签聚合结果</span>
      </div>
      <!-- 聚合tab列表 -->
      <div id="group-label">
        <div class='group-wrap'>
          <div :class="{selectedLabel: index === activeIndex, groupItem}" v-for="(item, index) in groupCategory" :key="index" @click="showGroupDetail(index, item.cn_name)">{{item.cn_name}}</div>
        </div>
      </div>
      <!-- 聚合详情 -->
      <div id="groupDetail" v-if="stateCtrl.labelGroupVisible" v-loading="loadingCtrl.isGroupDetailLoading" element-loading-text="拼命加载中">
        <div class="content">
          <div class="left">
            <at-table class="left__table" :data="groupPicData">
              <at-table-column prop="key" :label="activeName" :show-overflow-tooltip="true" width="260">
              </at-table-column>
              <at-table-column prop="doc_count" label="日志数" :show-overflow-tooltip="true" align="right"></at-table-column>
            </at-table>
            <at-button type="primary" class="btn-download" @click="downloadGroupJson"><span class="saas-icon-res-down"></span>下载</at-button>
          </div>
          <at-tabs class="right" v-model="tabTypeShow" @tab-click="changeTypeShow" type="border-card">
              <at-tab-pane name="zhu">
                <span slot="label">柱状图</span>
                <ATBar ref="echart" v-if="tabTypeShow == 'zhu'" :xData="xData" :yData="yData" style="width:100%;height:410px;" leftspace="0px" rightspace="0px" bottomspace="50px" toolboxTop="347px" :fileName="groupCategory[this.activeIndex].cn_name+'-柱状图'"></ATBar>
              </at-tab-pane>
              <at-tab-pane name="bing">
                <span slot="label">饼状图</span>
                <pie ref="echart" v-if="tabTypeShow == 'bing'" :seriesData="pieData" style="width:100%;height:410px;" leftspace="0px" rightspace="0px" bottomspace="50px" toolboxTop="347px" :fileName="groupCategory[this.activeIndex].cn_name + '-饼状图'"></pie>
              </at-tab-pane>
          </at-tabs>
        </div>
      </div>
      <!-- 主显示区 -->
      <div class="main-wrap">
        <!-- 操作按钮 -->
        <div class="main-title">
          {{translateChinese('type', logType)}}日志列表
        </div>
        <div id="operation-wrap">
          <at-button @click="stateCtrl.fileExportVisible=true;(totalSelectedItem.length>0) ? (exportInfo.amount = '1') : (exportInfo.amount = '2')" type="primary"><i class="saas-icon-res-right"></i>导出</at-button>
        </div>
        <!-- 主列表 -->
        <div class="table-main-wrap">
            <!-- v-loading="loadingCtrl.isTableLoading" element-loading-text="拼命加载中" -->
          <at-table ref="log" id="table-main" :data="tableData" @sort-change="handleSortChange" @selection-change="handleSelectionChange" @cell-click="jumpDetail"  :row-key="getRowKeys">
            <at-table-column type="selection" width="60" :reserve-selection="true"></at-table-column>
            <at-table-column prop="_source.ts" label="发生时间" width="180" sortable>
              <template slot-scope="scope">
                <span>{{scope.row._source.ts}}</span>
              </template>
            </at-table-column>
            <at-table-column prop="_source.sys_info.name" label="系统名称" width="200"  show-overflow-tooltip>
                <template slot-scope="scope">
                  <span>{{scope.row._source.sys_info === undefined ? '未注册资产': (scope.row._source.sys_info.name === undefined || scope.row._source.sys_info.name === null || scope.row._source.sys_info.name === '')? '未注册资产' : scope.row._source.sys_info.name}}</span>
                </template>
            </at-table-column>
            <at-table-column prop="_source.level" label="严重级别" width="110" v-if="logType!=='visible'" sortable>
                <template slot-scope="scope">
                  <span v-if="scope.row._source.level" :class="['level-tag',scope.row._source.level === 0?'level-tag-normal':scope.row._source.level === 1?'level-tag-low-risk':scope.row._source.level === 2?'level-tag-middle-risk':scope.row._source.level === 3?'level-tag-high-risk':'level-tag-serious']">
                      {{scope.row._source.level === undefined ? ' ': `${translateChinese('levelStr',scope.row._source.level)}`}}
                  </span>
                  <span class="level" v-else>--</span>  
                </template>
            </at-table-column>
            <at-table-column prop="_source.describes" label="日志描述" show-overflow-tooltip>
                <template slot-scope="scope">
                  <span>{{scope.row._source.describes}}</span>
                </template>
            </at-table-column>
            <at-table-column prop="_source.stype" label="日志类型" show-overflow-tooltip width="140">
              <template slot-scope="scope">
                <span v-html="translateChinese('stype', scope.row._source.stype, stypeDict)"></span>
              </template>
          </at-table-column>
            <at-table-column prop="_source.pid" label="来源" width="120">
                <template slot-scope="scope">
                  <span>{{translateChinese('source', scope.row._source.stype)}}</span>
                </template>
            </at-table-column>
          </at-table>
        </div>
        <!-- 分页器 -->
        <div id="bottom">
          <span class="pageSign">
              <at-tooltip content="数据量过大，只显示前9900条" placement="top" v-if="pagination.total>9900">
                <i class="btn-info"></i>
              </at-tooltip>
          </span>
          <div class="pageWrap">
            <Pagination  :currentPage="pagination.currentPage" :total="pagination.total>9900?9900:pagination.total" :pageSizes="[20, 40, 60, 80]" :pageSize="pagination.pageSize" layout="slot, total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange" ref="aaa">
            </Pagination>
          </div>
        </div>
      </div>
    </div>
    <!-- 导出对话框 -->
    <at-dialog title="导出" class="file-export" :visible.sync="stateCtrl.fileExportVisible">
      <div class="dialog-body">
        <tr>
          <td class="body-title">导出范围</td>
          <td class="item"><at-radio-wall v-model="exportInfo.amount" label="1">导出选中</at-radio-wall></td>
          <td><at-radio-wall v-model="exportInfo.amount" label="2">导出全部（最多10000条）</at-radio-wall></td>
        </tr>
        <tr>
          <td class="body-title">导出格式</td>
          <td class="item"><at-radio-wall v-model="exportInfo.type" label="3">Excel导出</at-radio-wall></td>
          <td><at-radio-wall v-model="exportInfo.type" label="4">JSON格式导出</at-radio-wall></td>
        </tr>
      </div>
      <div slot="footer" class="dialog-footer">
        <at-button type="primary" @click="confirmExportEvent">确 定</at-button>
      </div>
    </at-dialog>
  </div>
</template>

<script>
import { mapActions, mapMutations, mapGetters, mapState } from 'vuex'
import { getProjectConfig } from './config'
import { detailInfoStructure, mixin } from '../../../models/safeEvents/utils/util'
import { setCondition } from '../../../models/safeEvents/utils/esSearch'
import transfer from './transfer'
import { initDetail } from '../../../models/safeEvents/utils/initDetail'
import pie from '../../../components/safeEvents/pie'
export default {
  components: {
    transfer,
    pie
  },
  mixins: [mixin],
  data () {
    return {
      // 返回table row.id 用于导出
      getRowKeys (row) {
        return row._id
      },
      // 项目控制
      projectCtrl: {
        btnExport: false,
        btnImport: false,
        btnUserInsert: false
      },
      stateCtrl: {
        // 搜索框清空按钮
        btnClearVisible: false,
        // 高度auto的index
        moreCtrl: null,
        // 显示“更多按钮“的index
        btnMoreCtrl: null,
        // 导出对话框
        fileExportVisible: false,
        // 过滤对话框
        filterDialogVisible: false,
        // 标签聚合
        labelGroupVisible: false
      },
      // 筛选条件类别  用于"更多"对话框
      dialogType: '',
      // 筛选条件类别index
      dialogIndex: 0,
      // 聚合tab当前active的index
      activeIndex: -1,
      activeName: '',
      tabTypeShow: 'zhu',
      // 所有页中table勾选的数据
      totalSelectedItem: [],
      // 标签聚合图表X/Y轴数据
      xData: [],
      yData: [],
      // 饼图数据
      pieData: [],
      // 导出选项
      exportInfo: {
        amount: '1', // 默认导出选中
        type: '3' // 默认以excel形式导出
      },
      // 上次点击过的详情id
      lastId: '',
      // 日志详情source数据
      detailHandleData: {
        status: false,
        projectCtrl: {}
      },
      groupItem: 'groupItem',
      // 时间日期 下拉 快速选择
      pickerOptions: {
        shortcuts: [
          {
            text: '过去15分钟',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 60 * 1000 * 15)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '过去30分钟',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 60 * 1000 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '过去45分钟',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 60 * 1000 * 45)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '过去60分钟',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 60 * 1000 * 60)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '过去90分钟',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 60 * 1000 * 90)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '过去24小时',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '过去7天',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '过去30天',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '过去60天',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 60)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '过去90天',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      }
    }
  },
  created () {
    // 项目配置
    let projectConfig = this.getProjectConfig(this.project.name)
    for (let index in projectConfig) {
      this.projectCtrl[index] = projectConfig[index]
    }
    // 设置检测日志类型
    this.SET_LOGTYPE(this.$route.path.split('/')[3])
    // 设置es搜索类型
    setCondition(this.$route.path.split('/')[3])
    // 任务日志
    if (this.$route.params.event_id !== undefined) {
      // 获取筛选条件列表
      this.GET_FILTER_GROUP()
      // 清空筛选条件选择状态
      this.CLEAR_FILTER()
      // 设置搜索框值
      this.searchInput = `event_id:${this.$route.params.event_id}`
      this.stateCtrl.btnClearVisible = this.searchInput.length !== 0
      this.SET_SEARCHINPUT_ES(this.searchInput)
      this.dayRange = []
      this.SET_TIMERANGE([])
      // 更新上一次检测日志类型
      this.SET_LAST_LOGTYPE(this.$route.path.split('/')[3])
      this.onSearch('search')
    } else {
      if (this.$route.path.split('/')[3] !== this.lastLogType) {
        this.searchInput = ''
        this.SET_SEARCHINPUT_ES(this.searchInput)
        this.stateCtrl.btnClearVisible = this.searchInput.length !== 0
        // 获取日志类型中英对照
        this.GET_STYPE_DICT()
        // 获取筛选条件列表
        this.GET_FILTER_GROUP()
        // 清空筛选条件选择状态
        this.CLEAR_FILTER()
        this.SET_LAST_LOGTYPE(this.$route.path.split('/')[3])
        this.onSearch('search')
      } else {
        this.stateCtrl.btnClearVisible = this.searchInput.length !== 0
      }
    }
  },
  mounted () {
  },
  methods: {
    ...mapActions('safeEvents', [
      // 保存搜索历史
      'PUT_SEARCH_HISTORY',
      // 获取搜索结果
      'GET_SEARCH',
      // 获取历史搜索
      'GET_HISTROY',
      // 导出选中(json文件)
      'DOWNLOAD_JSONFILE',
      // 导出全部(json文件)
      'DOWNLOAD_JSONFILE_All',
      // 聚合 获取echarts数据
      'GET_ECHARTS',
      // 聚合 json下载
      'POST_ECHART_JSON',
      // 主table排序
      'GET_HANDLE_SORT',
      // 点击筛选项，获取筛选结果
      'GET_LABEL_GROUP',
      // 根据大的日志类别 获取筛选条件列表
      'GET_FILTER_GROUP',
      // 导出选中(excel)
      'DOWNLOAD_EXCELFILE',
      // 导出全部(excel)
      'DOWNLOAD_EXCELFILE_ALL',
      // 获取省市区（县）级联列表
      'GET_LOCATION',
      // 筛选条件 所属机构/系统名称/日志类型
      'GET_FILTER_GROUP_OTHER',
      // 获取日志类型中英对照
      'GET_STYPE_DICT'
    ]),
    ...mapMutations('safeEvents', [
      'SET_LAST_LOGTYPE',
      'SET_LOGTYPE',
      'SET_RAWDATA',
      'SET_HANDLEDATA',
      'SET_DAYRANGE',
      'SET_TIMERANGE',
      'SET_SEARCHINPUT_ES',
      'SET_SEARCHINPUT_TEXT',
      'SET_GROUP_CHOOSE',
      'SET_MORE_VISIABLE',
      'SET_CURRENTSIZE',
      'SET_CURRENTPAGE',
      'CLEAR_FILTER',
      'SET_DETAIL_INFO'
    ]),
    // 获取项目配置
    getProjectConfig (name) {
      return getProjectConfig(name)
    },
    // 清空搜索框
    clearInput () {
      this.searchInput = ''
    },
    // 更新时间选择器的值
    onDateRangeChange (value) {
      this.SET_TIMERANGE(value)
    },
    // 历史搜索数据
    searchHistory (queryString, callback) {
      let ans = []
      for (let i in this.history) {
        ans.push({ value: this.history[i].se_content })
      }
      callback(ans)
    },
    // 搜索
    onSearch (type) {
      this.SET_SEARCHINPUT_ES(this.searchInput)
      // 搜索输入框数据
      if (this.searchInput !== '') {
        this.PUT_SEARCH_HISTORY(this.searchInput)
      }
      // 复位当前页数
      if (type !== 'sizeChange') {
        this.SET_CURRENTPAGE(1)
      }
      // 关闭展开
      if (type !== 'filter' && type !== 'sizeChange') {
        this.stateCtrl.labelGroupVisible = false
      }
      this.GET_SEARCH(type)
      this.GET_HISTROY()
    },
    // 筛选条件 更对对话框关闭时触发
    filterDialogClose () {
      this.$refs.transfer.clearEvent()
    },
    // 将穿梭框选中的项设置成选中状态
    chooseChangeEvent (val) {
      if (val === 'clearChoose') {
        this.choose[this.dialogIndex] = []
      } else {
        this.choose[this.dialogIndex] = this.filterData[this.dialogType]
      }
      this.changeCheckboxFilter()
    },
    // 筛选条件 取消按钮关闭更多对话框
    closeFilterDialog () {
      this.stateCtrl.filterDialogVisible = false
    },
    // “更多” 按钮
    moreGroup (index) {
      this.dialogIndex = index
      if (index === 0 || index === 2 || index === 3) {
        this.dialogType = this.filterCategory[index].esKey
        // 获取日志类型不需要获取地理位置
        if (index !== 0) {
          this.GET_LOCATION({})
        }
        // 设置穿梭狂左侧数据, 获取日志类型需要参数
        let condition = index === 0 ? { type: this.logType } : {}
        this.GET_FILTER_GROUP_OTHER({ type: this.dialogType, condition: condition })
        this.stateCtrl.filterDialogVisible = true
        // 对话框打开时触发，将选中的筛选条件同步到穿梭框已选择
        setTimeout(() => {
          this.$refs.transfer.initData(this.choose[index])
        }, 0)
      } else {
        this.stateCtrl.moreCtrl = index
        this.stateCtrl.btnMoreCtrl = index
      }
    },
    // 筛选条件过滤
    changeCheckboxFilter () {
      // 关闭聚合
      this.stateCtrl.labelGroupVisible = false
      this.activeIndex = -1
      // 更新筛选条件选择状态
      this.SET_GROUP_CHOOSE(this.choose)
      this.SET_CURRENTPAGE(1)
      // 聚合过滤
      this.GET_LABEL_GROUP('filter')
    },
    // 聚合详情图表tabs切换
    changeTypeShow (el) {
      this.drawEcharts(this.groupPicData, el.name)
    },
    // 聚合详情 echarts数据
    drawEcharts (data, type) {
      let newData = {}
      if (type === 'zhu') {
        newData.key = []
        newData.value = []
        for (let item of data) {
          newData.key.push(item.key)
          newData.value.push(item.doc_count)
        }
        this.xData = newData.key
        this.yData = newData.value
      } else {
        for (let item of data) {
          item.name = item.key
          item.value = item.doc_count
        }
        this.pieData = data
      }
    },
    // 展示聚合详情
    showGroupDetail (index, name) {
      this.activeName = name
      if (this.stateCtrl.labelGroupVisible) {
        // 如果上次点开的也是此tab,则隐藏详情
        if (this.lastId === index) {
          this.stateCtrl.labelGroupVisible = false
          this.activeIndex = -1
        } else {
          // 当前tab高亮 重新获取数据
          this.activeIndex = index
          this.lastId = index
          this.GET_ECHARTS({ key: index, num: 20 })
          this.drawEcharts(this.groupPicData, this.tabTypeShow)
        }
      } else {
        this.lastId = index
        this.activeIndex = index
        this.GET_ECHARTS({ key: index, num: 20 })
        this.drawEcharts(this.groupPicData, this.tabTypeShow)
        this.stateCtrl.labelGroupVisible = true
      }
    },
    // 聚合详情 json下载
    downloadGroupJson () {
      this.POST_ECHART_JSON(this.activeIndex)
    },
    // 提交导出事件
    confirmExportEvent () {
      // 表格无数据时，提示暂无可导出数据
      if (this.pagination.total <= 0) {
        this.$notify.error({
          title: '暂无可导出数据'
        })
      } else {
        if (this.exportInfo.amount === '1') {
        // 导出选中
          if (this.totalSelectedItem.length === 0) {
            this.$notify({
              title: '警告',
              message: '没有选中文本',
              type: 'warning'
            })
          } else {
            if (this.exportInfo.type === '4') {
              this.DOWNLOAD_JSONFILE(this.totalSelectedItem)
            } else {
            // excel
              this.DOWNLOAD_EXCELFILE(this.totalSelectedItem)
            }
          }
        } else {
        // 导出全部
          if (this.exportInfo.type === '4') {
            this.DOWNLOAD_JSONFILE_All()
          } else {
          // excel
            this.DOWNLOAD_EXCELFILE_ALL()
          }
        }
      }
      this.stateCtrl.fileExportVisible = false
    },
    // 主table排序
    handleSortChange ({ prop, order }) {
      this.SET_CURRENTPAGE(1)
      this.GET_HANDLE_SORT({
        prop: prop,
        order: order
      })
    },
    // 主table勾选
    handleSelectionChange (value) {
      this.totalSelectedItem = value
    },
    // 每页显示条目改变
    handleSizeChange (value) {
      this.SET_CURRENTPAGE(1)
      this.SET_CURRENTSIZE(value)
      this.onSearch('sizeChange')
    },
    // 当前页改变
    handleCurrentChange (value) {
      // 设置当前页
      this.SET_CURRENTPAGE(value)
      // 生成对应es搜索语句
      this.SET_SEARCHINPUT_ES(this.searchInput)
      // 存在聚合过滤
      if (this.stateCtrl.labelGroupVisible) {
        this.GET_SEARCH('filter')
      } else {
        this.GET_SEARCH('search')
      }
    },
    // 查看日志详情
    jumpDetail (row, event) {
      // 鼠标点击任意一行
      if (event.type === 'default') {
        // 设置原始数据
        this.SET_RAWDATA(row)
        // 处理后数据
        this.SET_HANDLEDATA(initDetail(row._source))
        this.GET_STYPE_DICT()
        // 设置详情页显示内容
        let info = detailInfoStructure({ stype: row._source.stype, handleData: this.handleData, stypeDict: this.stypeDict })
        this.SET_DETAIL_INFO(info)
        this.detailHandleData.projectCtrl = this.projectCtrl
        this.$router.push({
          path: '/monitor/log/' + this.logType + '/' + this.logType + 'Detail/' + row._id
        })
      }
    },
    // #############待保留代码#########

    // 根据checkbox的DOM宽度判断是否显示”更多“
    countCheckboxWidth () {
      for (let index in this.filterCategory) {
        let sumWidth = 0
        let totalWidth = this.$refs.checkboxWrap[index].clientWidth
        let subsetList = this.$refs.checkboxWrap[index].childNodes[0]
          .childNodes
        for (let el of subsetList) {
          sumWidth += el.clientWidth
        }
        let obj = {
          index: index,
          value: sumWidth > totalWidth
        }
        this.SET_MORE_VISIABLE(obj)
      }
    }
  },
  computed: {
    ...mapState({ project: state => state.system.project,
      changeSizeValue: state => state.system.changeSizeValue,
      riskTime: state => state.safeEvents.riskTime
    }),
    ...mapGetters('safeEvents', [
      'groupPicData',
      'filterData',
      'filterCategory',
      'groupCategory',
      'tableData',
      'handleData',
      'pagination',
      'history',
      'loadingCtrl',
      // 大的日志类型，攻击、脆弱性、异常、运行状态、全部
      'logType',
      'lastLogType',
      'location',
      // 筛选条件 日志类型
      'stypeDict'
    ]),
    // 时间选择器显示的时间
    dayRange: {
      get () {
        return this.$store.state.safeEvents.dayRange
      },
      set (value) {
        this.SET_DAYRANGE(value)
      }
    },
    // 搜索框
    searchInput: {
      get () {
        return this.$store.state.safeEvents.searchInput
      },
      set (value) {
        this.SET_SEARCHINPUT_TEXT(value)
      }
    },
    // 标签聚合checkbox选择状态
    choose: {
      get () {
        return this.$store.state.safeEvents.choose
      },
      set (value) {
        this.SET_GROUP_CHOOSE(value)
      }
    }
  },
  watch: {
    // 检测到左侧菜单收缩或展开 重绘echarts
    changeSizeValue () {
      if (this.$refs.echart !== undefined) {
        this.$refs.echart.myChart.resize()
      }
    },
    // 项目配置
    project () {
      let projectConfig = this.getProjectConfig(this.project.name)
      for (let index in projectConfig) {
        this.projectCtrl[index] = projectConfig[index]
      }
    },
    // 搜索框清空按钮
    searchInput () {
      this.stateCtrl.btnClearVisible = this.searchInput.length !== 0
    },
    // 聚合详情列表数据（第一次加载图表的tab时不会触发this.drawEcharts()）
    groupPicData (to) {
      this.drawEcharts(to, this.tabTypeShow)
    },
    // 筛选列表变更后重新判断是否显示“更多”
    filterData (to) {
      this.$nextTick(() => {
        this.countCheckboxWidth()
      })
    }
  }
}
</script>

<style src="./index.less" lang='less'>
</style>
